<template>
  <div class="coupons-page">
    <n-tabs default-value="我的卡券" type="line">
      <n-tab-pane name="我的卡券" tab="我的卡券"></n-tab-pane>
    </n-tabs>
    <template v-if="tableInfo.tableData.length === 0">
      <div class="empty">
        <n-empty size="large" description="暂无数据~"></n-empty>
      </div>
    </template>
    <template v-else>
      <div class="list">
        <div
          class="item"
          :class="{ 'item-dis': item.couponStatus !== 'NOT_USE' }"
          v-for="item in tableInfo.tableData"
          :key="item.id"
        >
          <img
            v-if="item.couponStatus !== 'NOT_USE'"
            class="over"
            src="@/assets/icon/user/coupons/over.png"
            alt=""
          />
          <img class="bg" src="@/assets/icon/user/coupons/coupons.png" alt="" />
          <div class="con">
            <div class="prices">
              <span>￥</span>
              <span>{{ item.money }}</span>
            </div>
            <div class="title">满{{ item.satisfyMoney }}元可使用</div>
            <div class="date">有效期至: {{ item.pastTime }}</div>
            <n-button class="btn" type="primary" round @click="handUse(item)">
              {{ item.type === 'RECHARGE' ? '开通VIP' : '立即充值' }}
            </n-button>
          </div>
        </div>
      </div>
      <div class="pagination">
        <n-pagination
          v-model:page="tableInfo.queryForm.current"
          :page-count="tableInfo.total"
          :page-sizes="tableInfo.pageSizes"
          show-quick-jumper
          show-size-picker
          @updatePage="pageChange"
          @updatePageSize="sizeChange"
        ></n-pagination>
      </div>
    </template>
    <vip-dia ref="vipRef" />
    <recharge-dia ref="rechargeRef" />
  </div>
</template>
<script setup lang="ts">
import { NTabPane, NTabs, NButton, NPagination, NEmpty } from 'naive-ui'
import { useApi } from '@/hooks/useApi'
import RechargeDia from '@/components/RechargeDia.vue'
import { ref } from 'vue'
import VipDia from '@/components/VipDia.vue'
const { tableInfo, pageChange, sizeChange } = useApi({
  isPaging: true,
  isRequest: true,
  getData: async () => {
    return {
      code: 0,
      data: {
        total: 1,
        data: [
          {
            id: 1,
            couponStatus: 'NOT_USE',
            money: 10,
            satisfyMoney: 20,
            pastTime: '2025-10-1',
            type: 'RECHARGE'
          }
        ]
      }
    }
  },
  initForm: {
    size: 9
  }
})
const rechargeRef = ref()
const vipRef = ref()
const handUse = (e: any) => {
  if (e.couponStatus !== 'NOT_USE') return
  if (e.type === 'RECHARGE') {
    vipRef.value.open(e)
  } else {
    rechargeRef.value.open(e)
  }
}
</script>

<style scoped lang="scss">
.coupons-page {
  min-height: 1420px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #eeeeee;
  box-sizing: border-box;
  padding: 15px 24px;
  .empty {
    margin-top: 150px;
  }
  .list {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    min-height: 500px;
    .item {
      width: 300px;
      height: 218px;
      position: relative;
      .over {
        width: 67px;
        height: 67px;
        position: absolute;
        right: 0;
        top: 0;
      }
      .bg {
        width: 100%;
        height: 100%;
        border-radius: 12px;
      }
      .con {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 10px;
        .prices {
          font-size: 40px;
          color: #f61817;
          font-weight: bold;
          span {
            &:first-child {
              font-size: 17px;
            }
          }
        }
        .title {
          margin-top: 6px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #b77353;
        }
        .date {
          margin-top: 8px;
          font-size: 12px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #b77353;
        }
        .btn {
          margin-top: 32px;
          width: 166px;
          height: 40px;
          font-size: 16px;
        }
      }
      &-dis {
        -webkit-filter: grayscale(1);
        filter: grayscale(1);
      }
    }
  }
  .pagination {
    padding: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
